<template>
	<view class="home">
		<!-- <text class="welcome" space="ensp">欢迎登录  企业袋鼠</text> -->
		<view class="imgbg">
			<view class="title">欢迎登录城市执法</view>
			<view class="circle"><image src="http://download.qiyedaishu.com/common/zhifa.png"></image></view>
			<view class="text"></view>
		</view>
		<view class="single">
			<view class="cu-form-group">
				<text class="icon iconfont icon-yonghu"></text>
				<uinput name="UserName" class="m-input" type="text" clearable="true" v-model="UserName" placeholder="请输入账号" :maxlength="18"></uinput>
			</view>
			<view class="cu-form-group">
				<text class="icon iconfont icon-124"></text>
				<uinput name="UserPwd" type="password" displayable="true" v-model="UserPwd" placeholder="请输入密码" :maxlength="18"></uinput>
			</view>
			<view class="login"><button @click="Login">登录</button></view>
		</view>
	</view>
</template>

<script>
	import uinput from '@/components/uni-input/uni-input.vue'
	export default {
		components: {
			uinput
		},
		data() {
			return {
				UserName:'',
				UserPwd:''
			};
		},
		onShow() {
			if(uni.getStorageSync("UserName")){
				this.UserName = uni.getStorageSync("UserName");
			}
		},
		methods:{
			Login(e){
				var data = {};
				data.Act="Login";
				data.UserName = this.UserName;
				data.UserPwd = this.UserPwd;
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					console.log(json);
					this.Util.HideLoading();
					if(json.State){
						uni.setStorageSync("UserName", data.UserName);
						uni.setStorageSync("Token",json.Data.Admin.Token);
						uni.setStorageSync("AuditNum",json.Data.AuditNum); //当前登录的角色是第几个审批人
						this.Util.Toast("登录成功，正在跳转...",item=>{
							uni.reLaunch({
								url:"/pages/index/index"
							})
						})
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page{background: #ffffff;}
	.cu-form-group{justify-content: flex-start;
		uinput{flex:1;}
	}
	.home{
		width:100%;
		display: flex;
		flex-direction: column;
		background-image: url(http://download.qiyedaishu.com/common/loginbg.png);
		background-repeat: no-repeat;
		background-size: 100% 500rpx;
		.imgbg{width:100%; height:300rpx; position: relative; margin-top:180rpx; display:flex; flex-direction: column;
			.title{width:100%; height:80rpx; line-height:40rpx; font-size:40rpx; text-align: center; color:#ffffff; }
			.circle{width:160rpx; height:160rpx; border-radius:80rpx; margin:0 auto; text-align: center;
				image{width:160rpx; height:160rpx; border-radius:80rpx; border:2rpx solid #ffffff;}
			}
			.text{width:100%; height:60rpx; margin:0 auto; margin-top:20rpx; text-align: center; color:#eeeeee;}
		}
		.welcome{
			width:100%;
			height: 120rpx;
			margin-top:100rpx;
			font-size:50rpx;
		}
		.single{ margin-top:140rpx; display:flex; flex-direction: column; padding-left:50rpx; padding-right: 50rpx;
			/*
			.tip{font-size:30rpx; height:50rpx; margin-top:20rpx;}
			.username{height:65rpx;}
			*/
		    .flex{display:flex; flex-direction: row;
				label{width:auto; display:flex; flex-direction: row;}
			}
		}
		.login{margin-top:120rpx;
			button{width:100%; height:100rpx; line-height: 100rpx; border-radius:50rpx; text-align:center; background:linear-gradient(to right,#2f70f1,#6092f5); color:#ffffff; font-size:34rpx;}
		}
		.multiple{ margin-top:60rpx; display:flex; flex-direction: column; padding-left:50rpx; padding-right: 50rpx;
			.tip{width:100%; height:60rpx; color:$uni-tip-color;}
			.company{width:100%; min-height:80rpx; padding-top:16rpx;
				label{display:flex; justify-content:space-between;
					.name{flex:1; min-height:50rpx; line-height: 50rpx; font-size:36rpx; overflow:hidden;}
					.check{width:60rpx;}
				}
			}
			.company:active{background-color: $uni-active-color; border-radius:6rpx;}
		}
		.regist{width:100%; height:200rpx; line-height: 200rpx; text-align: center; font-size:34rpx; color:$uni-tip-color; display:flex; flex-direction: row; justify-content:center; 
			.forget{margin-left:60rpx;}
		}
	}
	button{width:200rpx; height:80rpx; line-height: 80rpx; border-radius:40rpx; font-size:28rpx; color:#ffffff; background:linear-gradient(to right,#2f70f1,#6092f5);}
	button:active{opacity: 0.7;}
	/deep/uni-checkbox .uni-checkbox-input{border-radius: 12px; margin-top:-8rpx;}
	/deep/uni-checkbox::before{margin-top:-20rpx;}
	/deep/.cu-form-group{padding:0rpx; background-color: #f5f5f5; min-height: 100rpx; border-radius:50rpx; margin-bottom: 20rpx; padding-left:30rpx;
		.icon{width:60rpx; font-size:36rpx; color:$uni-tip-color; }
		.iconmima8{font-size:37rpx;}
		.iconmimaqueren{width:65rpx; font-size:50rpx; margin-left:-5rpx;}
		
	}
	/deep/.m-icon{margin-left:-20px;}
</style>
